<template>
  <view :data-theme="theme">
    <view class="custom-nav acea-row" :style="{ height: navH + 'rpx', background: backgroundColor }"
      :class="isBackgroundColor? 'backgroundColor' : ''" @touchstart="touchStart">
      <!-- #ifdef MP -->
      <view class="mp-header" :style="{ height: navH + 'rpx' }">
        <view class="sys-head" :style="{ height: sysHeight + 'px' }"></view>
        <view class="left-icon-wrapper" :style="{ top: sysHeight + 6 + 'px' }">
          <image class="back-icon" src="/static/images/left.png" mode="aspectFit" @tap="returns"></image>
        </view>
        <view class="nav_title" :style="{ height: '80rpx', lineHeight: '80rpx', color: iconColor }">
          {{backTitle}}
          <slot name="default"></slot>
        </view>
      </view>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <view class="left-icon-wrapper" :style="{ top: homeTop + 'rpx' }">
        <image class="back-icon" src="/static/images/left.png" mode="aspectFit" @tap="goToHome"></image>
      </view>
      <view class="nav_title" :style="{ height: '80rpx', lineHeight: '80rpx', color: iconColor }">
        {{backTitle}}
        <slot name="default"></slot>
      </view>
      <view class="right_select" :style="{ top: homeTop + 'rpx' }" @tap="showNav">
        <text class="iconfont icon-gengduo2"></text>
      </view>
      <!-- #endif -->
      <!-- #ifdef APP-PLUS -->
      <view v-if="isBack" class="left-icon-wrapper" :style="{ top: (homeTop + 30) + 'rpx', color: iconColor }">
        <image class="back-icon" src="/static/images/left.png" mode="aspectFit" @tap="returns"></image>
      </view>
      <view v-if="isBack" class="nav_title" :style="{ top: (homeTop + 20) + 'rpx', color: iconColor }">
        {{backTitle}}
        <slot name="default"></slot>
      </view>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
let app = getApp();
let sysHeight = uni.getSystemInfoSync().statusBarHeight;

export default {
  data() {
    return {
      theme: app.globalData.theme,
      sysHeight: sysHeight,
      homeTop: 18,
      navH: "",
      currentPage: false,
      returnShow: false
    };
  },
  computed: mapGetters(['globalData']),
  props: {
    //是否展示返回按钮
    isBack: {
      type: Boolean,
      default: true
    },
    backTitle: {
      type: String,
      default: ''
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    },
    //头部背景色是否使用主题色颜色
    isBackgroundColor: {
      type: Boolean,
      default: true
    },
    // icon、标题颜色
    iconColor: {
      type: String,
      default: '#333333'
    }
  },
  created() {
    var pages = getCurrentPages();
    this.returnShow = pages.length === 1? false : true;
    this.$nextTick(() => {
      // #ifdef MP
      const menuButton = uni.getMenuButtonBoundingClientRect();
      const query = uni.createSelectorQuery().in(this);
      query
       .select('.left-icon-wrapper')
       .boundingClientRect(data => {
          if (data) this.homeTop = menuButton.top * 2 + menuButton.height - data.height;
        })
       .exec();
      // #endif
      // #ifdef APP-PLUS
      this.homeTop = sysHeight * 2;
      // #endif
    });
    // #ifdef MP || APP-PLUS
    // 获取导航高度；
    this.navH = this.globalData.navHeight;
    // #endif
    // #ifdef H5
    this.navH = 80;
    // #endif
  },
  methods: {
    returns() {
	  if (this.returnShow) {
		uni.navigateBack(-1);
	  } else {
		// uni.reLaunch({
		//   url: '/pages/index/index'
		// });
		uni.switchTab({
			url: '/pages/index/index',
			fail: (err) => {
				console.error('uni.switchTab 失败:', err);
			}
		});
	  }
	},
    // 返回首页（这个方法可以保留，也可以删除，因为和 returns 方法功能重复）
    goToHome() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    showNav() {
      this.currentPage =!this.currentPage;
    },
    touchStart() {
      this.currentPage = false;
    }
  }
};
</script>

<style scoped lang="scss">
/* #ifdef MP || APP-PLUS */
.mp-header {
  z-index: 999;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}
/* #endif */

.custom-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
}

.left-icon-wrapper {
  position: fixed;
  left: 20rpx;
  z-index: 1000;
}

.back-icon {
  width: 64rpx; /* 修改宽度为 64rpx */
  height: 64rpx; /* 修改高度为 64rpx */
}

.nav_title {
  // width: 200rpx;
  color: #fff;
  font-size: 36rpx;
  position: fixed;
  text-align: center;
  left: 0;
  right: 0;
  margin: auto;
}

.right_select {
  width: 50rpx;
  height: 50rpx;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  position: fixed;
  right: 20rpx;
  text-align: center;
  line-height: 50rpx;
}
</style>